<template>
    <div>
        <slot name="left" :date="date_interval"></slot>
        <el-radio-group 
            class="charts-radio-group"
            v-model="dateType" 
            :size="size ? size : 'small'" 
            @change="handleRadioChange">
            <el-radio-button label="visit_date_7">最近7天</el-radio-button>
            <el-radio-button label="visit_date_30">最近30天</el-radio-button>
            <el-radio-button label="visit_date_custom" v-if="isCustom !== false">自定义</el-radio-button>
        </el-radio-group>
        <el-date-picker
            class="charts-date-picker"
            v-show="dateType == 'visit_date_custom'"
            :size="size ? size : 'small'"
            :picker-options="pickerOptions"
            v-model="dateInterval"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @focus="handleDateFocus"
            @change="handleChange">
        </el-date-picker>
    </div>
</template>
<script>
import { dateFormatter } from '@/common/js/util.js';
export default {
    name: 'datePicker',
    props: {
        dateDataType: null,
        date_interval: null,
        isCustom: true,
        size: null,
        date_min: null, // 最小时间范围,
        now_day: false,
        diff_day: null, // 时间间隔
    },
    data() {
        return {
            dateType: 'visit_date_7',
            dateInterval: [this.handleDay(-7), this.handleDay(-1)],
            pickerMinDate: null,
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.pickerMinDate = minDate
                },
                disabledDate: time => {
                    if(!this.pickerMinDate) {
                        let _dateTime = Date.now()
                        if(!this.now_day) _dateTime -= 8.64e7; // 不支持当日
                        if(this.date_min) {
                            let _minTime = (new Date(this.date_min)).getTime()
                            return time.getTime() > _dateTime || time.getTime() < _minTime
                        }
                        return time.getTime() > _dateTime // 必须选择一个日期后才开始按照29天的规则
                    }
                    const intervalTtime = this.diff_day ? (this.diff_day - 1) * 24 * 3600 * 1000 : 3 * 29 * 24 * 3600 * 1000; // 仅支持选择6个月范围
                    const currDate = this.pickerMinDate ? new Date(this.pickerMinDate) : new Date()
                    let minTime = currDate.getTime() - intervalTtime;
                    const maxTime = currDate.getTime() + intervalTtime;
                    let date = new Date(), dateTime = Date.now(), nowMonth = true;
                    // nowMonth = time.getFullYear() <= date.getFullYear() && time.getMonth() < date.getMonth(); // 不支持当月
                    if(!this.now_day) dateTime -= 8.64e7; // 不支持当日
                    if(this.date_min) {
                        minTime = (new Date(this.date_min)).getTime()
                    }
                    return time.getTime() > dateTime || time.getTime() < minTime || time.getTime() > maxTime || !nowMonth
                }
            }
        }
    },
    methods: {
        handleDateFocus() {
            this.pickerMinDate = null
        },
        handleRadioChange(value) {
            let diff_day = -7;
            switch(value) {
                case 'visit_date_custom': // 自定义
                break
                case 'visit_date_30':
                    diff_day = -30;
                default:
                    this.dateInterval = [this.handleDay(diff_day), this.handleDay(-1)];
                    this.handleChange();
                break;
            }
        },
        handleChange() {
            if(this.dateInterval) {
                this.$emit("getData", this.dateInterval)
            }
        },
        handleDay(diff_day) {
            if(this.now_day) diff_day += 1
            return dateFormatter('YYYY-MM-DD', Date.now() + diff_day * 24 * 3600 * 1000);
        }
    },
    created() {
        this.handleChange();
    },
    watch: {
        'dateDataType'(val, oldVal) {
            if(val) this.dateType = val;
        },
        'date_interval'(val, oldVal) {
            if(val) this.dateInterval = val;
        }
    }
}
</script>
<style scoped lang="scss">
    /deep/.charts-date-picker {
        margin: 0px 0 0 6px;
        vertical-align: middle;
        width: 300px;
        .el-range-input { width: 35%; }
        .el-range-separator { width: 15%; }
    }
    .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
        box-shadow: none;
    }
</style>